<template>
	<view class="sharebtn">
		<view class="uni-share">
			<view class="uni-share-content">
				<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box" @click='btnShare(index)'>
					<view class="uni-share-content-image">
						<image :src="item.icon" class="content-image" />
					</view>
					<text class="uni-share-content-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomData: [{
						text: '微信',
						icon: '/static/index/weixin.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/index/pengyouquan.png',
						name: 'copy'
					},
					{
						text: '复制',
						icon: '/static/index/copy.png',
						name: 'copy'
					}
				],
				// sharedataTemp: {
				// 	type: 0,
				// 	strShareUrl: "https://uniapp.dcloud.io",
				// 	strShareTitle: "分享标题",
				// 	strShareSummary: "分享总结",
				// 	strShareImageUrl: "/static/sharemenu/copyurl.png"
				// }
			}
		},
		props: ["sharedataTemp"],
		// onLoad() {
		// 	console.log('sharedataTemp',this.sharedataTemp);
		// },
		methods: {
			btnShare(ind) {
				console.log(ind)
				this.doCopy('https://533oe08115.zicp.vip'+uni.getStorageSync('shareUrl')) 
			},
			doCopy(content) {
					if(!content) {
						uni.showToast({
							title: '内容已复制到粘贴板,快去分享吧!!!',
							duration: 1000
						})
						console.log('复制的内容为空 !')
						return;
					}
					content = typeof content === 'string' ? content : content.toString() // 复制内容，必须字符串，数字需要转换为字符串
					/**
					 * 小程序端 和 app端的复制逻辑
					 */
					//#ifndef H5
					uni.setClipboardData({
						data: content,
						success: function() {
							//success("复制成功~")
							console.log('success');
							uni.showToast({
								title: '内容已复制到粘贴板,快去分享吧!!!',
								duration: 1000
							})
						},
						fail:function(){
							console.log("复制失败~")
						}
					});
					setClipboardText(content);
					//#endif
			
					/**
					 * H5端的复制逻辑
					 */
					// #ifdef H5
					if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断
						// 不支持
						console.log('浏览器不支持')
						return;
					}
					let textarea = document.createElement("textarea")
					textarea.value = content
					textarea.readOnly = "readOnly"
					document.body.appendChild(textarea)
					textarea.select() // 选择对象
					textarea.setSelectionRange(0, content.length) //核心
					let result = document.execCommand("copy") // 执行浏览器复制命令
					if(result){
						uni.showToast({
							title: '内容已复制到粘贴板,快去分享吧!!!',
							duration: 1000
						})
						console.log("复制成功~")
					}else{
						console.log("复制失败，请检查h5中调用该方法的方式，是不是用户点击的方式调用的，如果不是请改为用户点击的方式触发该方法，因为h5中安全性，不能js直接调用！")
					}
					textarea.remove()
					// #endif
				},
			
				setClipboardText(text){
					try{
						var os = plus.os.name;
						text = text||'';
						if('iOS' == os){
							var pasteboard = plus.ios.invoke('UIPasteboard', 'generalPasteboard');
							plus.ios.invoke(pasteboard, 'setValue:forPasteboardType:', text, 'public.utf8-plain-text');
						}else{
							var main = plus.android.runtimeMainActivity();
							var clip = main.getSystemService('clipboard');
							plus.android.invoke(clip, 'setText', text);
						}
					}catch(e){
						console.error('error @setClipboardText!!');
					}
				},
			
				getClipboardText(){
					try{
						var os = plus.os.name;
						if('iOS' == os){
							var pasteboard = plus.ios.invoke('UIPasteboard', 'generalPasteboard');
							return plus.ios.invoke(pasteboard, 'valueForPasteboardType:', 'public.utf8-plain-text')
						}else{
							var main = plus.android.runtimeMainActivity();
							var clip = main.getSystemService('clipboard');
							return plus.android.invoke(clip, 'getText');
						}
					}catch(e){
						console.error('error @getClipboardText!!');
					}
				}
			
		}
	}
</script>

<style lang="scss">
	/* 底部分享 */
	.sharebtn {
		.uni-share {
			width: 690rpx;
			margin: 30rpx;
			border-radius: 30rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			background-color: #fff;
			margin-bottom: 70px;
			.uni-share-content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				overflow-x: scroll;
				padding: 15px 50rpx;
				.uni-share-content-box {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					// width: 25%;
					// justify-content: space-between;
					margin-right: 60rpx;
					&:nth-last-child(1) {
						margin-right: 0;
					}
					.uni-share-content-image {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 90rpx;
						height: 90rpx;
						overflow: hidden;
						border-radius: 10rpx;
						.content-image {
							width: 90rpx;
							height: 90rpx;
						}
					}
					&:nth-last-child(1){
						.uni-share-content-image .content-image {
							width: 50rpx!important;
							height: 50rpx!important;
						}
					}
					.uni-share-content-text {
						font-size: 26rpx;
						color: #333;
						padding-top: 5px;
						padding-bottom: 10px;
					}
				}
			}
		}
	}
</style>
